<template>
	<scroll-view scroll-y="true" show-scrollbar="false" class="content">
		<view class="bg_box">
			<view class="bg01"></view>
			<view class="time_box">
				<block v-for="(item, index) in timeList" :key="index">
					<view class="time_list">
						<view class="text_box">
							<view class="name">{{item.name}}</view>
							<view class="time">年份：{{item.year}}</view>
						</view>
						<view class="menu_box">
							<view class="statu" v-if="item.st == 0">未购买</view>
							<view class="statu" v-if="item.st == 1">已购买</view>
							<view class="menu" v-if="item.year<=y && item.st == 0" :data-url="'/pages/index/mytea/gift?id='+item.id" @click="gotopage">购买礼包</view>
						</view>
					</view>
				</block>
			</view>
		</view>
	</scroll-view>
</template>

<script>
export default {
	data() {
		return {
			select: 0,
			y: 0,
			timeList: [
				{
					name: '这里是名字',
					time: '2027',
					statu:'0'
				},
				{
					name: '这里是名字',
					time: '2026',
					statu:'0'
				},
				{
					name: '这里是名字',
					time: '2025',
					statu:'0'
				},
				{
					name: '这里是名字',
					time: '2024',
					statu:'0'
				},
				{
					name: '这里是名字',
					time: '2023',
					statu:'0'
				},
				{
					name: '这里是名字',
					time: '2022',
					statu:'0'
				},
				{
					name: '这里是名字',
					time: '2021',
					statu:'1'
				},
				
			]
		};
	},
	onLoad(e){
		var date = new Date();
		
		let me = this;
		me.y=date .getFullYear();
		me.Net._get('cs_list',{id:e.id},(res)=>{
			if(res.code ==1){
				me.timeList=res.data
				
			  console.log(me.timeList)
			}
		});	
	},
	methods: {
		gotopage(e) {
			let url = e.currentTarget.dataset.url;
			uni.navigateTo({
				url: url
			});
		}
	}
};
</script>

<style lang="scss">
page {
	height: 100%;
	padding-bottom: 0 !important;
	background-color: #fff;
}
.content {
	height: 100%;
	position: relative;
}

.bg_box {
	width: 100%;
	position: relative;
}

.bg_box .bg01 {
	width: 100%;
	height: 40vw;
	background-color: #4d726f;
}

.time_box {
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

.time_list {
	width: 92%;
	margin: 4% auto 0;
	display: flex;
	align-items: center;
	border-radius: 2vw;
	background-color: #fff;
	box-shadow: 1px 6px 4.8px 0.2px rgba(51, 51, 51, 0.08);
	padding: 3vw;
	box-sizing: border-box;
}

.time_list .text_box {
	flex: 1;
}

.time_list .menu_box {
}

.time_list .text_box .name {
	font-size: 4vw;
	color: #333;
	font-weight: bold;
}

.time_list .text_box .time {
	font-size: 3.5vw;
	color: #333;
	margin-top: 2vw;
	font-weight: bold;
}

.time_list .menu_box .statu {
	font-size: 3.5vw;
	color: #4d726f;
	text-align: right;	
}

.time_list .menu_box .menu {
	width: 16vw;
	height: 8vw;
	line-height: 8vw;
	border-radius: 8vw;
	text-align: center;
	background-color: #d20001;
	font-size: 3.5vw;
	color: #fff;
	margin-left: 3vw;
	margin-top: 2vw;
}
</style>
